<%--
  Created by IntelliJ IDEA.
  User: 薛之谦
  Date: 2025/10/14
  Time: 20:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="header.jsp"/>
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3><i class="fas fa-file-alt"></i> 试卷管理</h3>
        <div>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#templateManageModal">
                <i class="fas fa-layer-group"></i> 模板管理
            </button>
            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#manualPaperModal">
                <i class="fas fa-hand-pointer"></i> 手动组卷
            </button>
            <button class="btn btn-info">
                <i class="fas fa-robot"></i> 自动组卷
            </button>
        </div>
    </div>

    <!-- 试卷列表 -->
    <div class="card">
        <div class="card-body">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>试卷名称</th>
                    <th>题目数量</th>
                    <th>总分</th>
                    <th>创建时间</th>
                    <th>创建方式</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <%-- JSTL 循环 --%>
                <tr>
                    <td>Java基础综合测试卷</td>
                    <td>50</td>
                    <td>100</td>
                    <td>2024-06-15</td>
                    <td>手动组卷</td>
                    <td>
                        <button class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                data-bs-target="#previewPaperModal">预览
                        </button>
                        <button class="btn btn-sm btn-warning">编辑</button>
                        <button class="btn btn-sm btn-danger">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>SQL基础-A卷</td>
                    <td>20</td>
                    <td>100</td>
                    <td>2024-05-10</td>
                    <td>自动组卷</td>
                    <td>
                        <button class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                data-bs-target="#previewPaperModal">预览
                        </button>
                        <button class="btn btn-sm btn-warning" disabled>编辑</button>
                        <button class="btn btn-sm btn-danger">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 模板管理模态框 -->
<div class="modal fade" id="templateManageModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">试卷模板管理</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- 模板创建表单 -->
                <div class="mb-4">
                    <h5>创建新模板</h5>
                    <form id="templateForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">模板名称</label>
                                    <input type="text" class="form-control" name="templateName">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">模板描述</label>
                                    <input type="text" class="form-control" name="description">
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">题目配置</label>
                            <div class="template-questions-config">
                                <!-- 动态添加题目配置项 -->
                                <div class="row mb-2">
                                    <div class="col-md-3">
                                        <select class="form-select" name="questionType">
                                            <option value="single_choice">单选题</option>
                                            <option value="multiple_choice">多选题</option>
                                            <option value="true_false">判断题</option>
                                            <option value="short_answer">简答题</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="number" class="form-control" placeholder="题目数量" name="questionCount">
                                    </div>
                                    <div class="col-md-3">
                                        <input type="number" class="form-control" placeholder="每题分数" name="scorePerQuestion">
                                    </div>
                                    <div class="col-md-3">
                                        <select class="form-select" name="difficultyLevel">
                                            <option value="easy">简单</option>
                                            <option value="medium">中等</option>
                                            <option value="hard">困难</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="addQuestionConfig()">添加配置项</button>
                        </div>

                        <button type="submit" class="btn btn-primary">保存模板</button>
                    </form>
                </div>

                <!-- 模板列表 -->
                <div>
                    <h5>现有模板</h5>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>模板名称</th>
                                <th>描述</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!-- 模板列表数据 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 手动组卷 模态框 (超大尺寸) -->
<div class="modal fade" id="manualPaperModal" tabindex="-1" aria-labelledby="manualPaperModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="manualPaperModalLabel">手动组卷</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <!-- 左侧：题库 (从 questionStore.jsp 的数据源获取) -->
                    <div class="col-md-6">
                        <h5>题库 (可筛选)</h5>
                        <div class="list-group" style="max-height: 500px; overflow-y: auto;">
                            <%-- 题库题目循环 --%>
                            <a href="#" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1">1. (单选题) Java中哪个关键字用于声明常量？</h6>
                                    <small>难度: 简单</small>
                                </div>
                                <p class="mb-1">A. var B. final C. static D. const</p>
                                <button class="btn btn-sm btn-outline-primary mt-1">添加到试卷</button>
                            </a>
                            <a href="#" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1">2. (多选题) 以下哪些是Java的集合类？</h6>
                                    <small>难度: 中等</small>
                                </div>
                                <p class="mb-1">A. ArrayList B. HashMap C. String D. Array</p>
                                <button class="btn btn-sm btn-outline-primary mt-1">添加到试卷</button>
                            </a>
                            <%-- ...更多题目 --%>
                        </div>
                    </div>
                    <!-- 右侧：已选题目 -->
                    <div class="col-md-6">
                        <h5>已选题目 (共 <span id="selectedCount">0</span> 题)</h5>
                        <ul class="list-group" id="selectedQuestions" style="max-height: 500px; overflow-y: auto;">
                            <%-- JS动态添加已选题目到这里 --%>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                (单选题) Java中哪个关键字用于声明常量？
                                <button class="btn btn-sm btn-outline-danger">移除</button>
                            </li>
                        </ul>
                        <div class="mt-3">
                            <label for="paperName" class="form-label">试卷名称</label>
                            <input type="text" class="form-control" id="paperName" placeholder="请输入试卷名称">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存试卷</button>
            </div>
        </div>
    </div>
</div>

<!-- 试卷预览 模态框 -->
<div class="modal fade" id="previewPaperModal" tabindex="-1" aria-labelledby="previewPaperModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="previewPaperModalLabel">试卷预览：Java基础综合测试卷</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <%-- 试卷题目循环 --%>
                <div>
                    <h6>1. (单选题) [5分] Java中哪个关键字用于声明常量？</h6>
                    <p>A. var</p>
                    <p>B. final</p>
                    <p>C. static</p>
                    <p>D. const</p>
                    <p><strong>正确答案: B</strong></p>
                </div>
                <hr>
                <div>
                    <h6>2. (判断题) [5分] Java支持多重继承。</h6>
                    <p>A. 正确</p>
                    <p>B. 错误</p>
                    <p><strong>正确答案: B</strong></p>
                </div>
                <hr>
                <div>
                    <h6>3. (简答题) [10分] 请简述什么是面向对象的三大特征？</h6>
                    <p><strong>参考答案: </strong>封装、继承、多态。</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<jsp:include page="footer.jsp"/>
